<template>
<div>
  <ul class="grade-list">
      <li class="grade" 
          v-for="(item,key) of allclass" :key='key'
          @click="handlescroll"
          >{{key}}</li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'classgrade',
  props:{
      allclass:Object
  },
  methods:{
      handlescroll(e){
          this.$emit('change',e.target.innerText)
      }
  }
}
</script>

<style scoped>
    .grade-list{
        position: absolute;
        right: 0;
        top: 25%;
        height: 50%;
        line-height: 50%;
        width: 1.2rem;
        font-size: .32rem;  
    }
    .grade{
        position: relative;
        margin: .6rem  0;
        height: .8rem;
        line-height: .8rem;
        text-align: center;
        background:rgb(100, 124, 204);
        border-radius: .28rem;
        color: #fff;
    }
</style>
